<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        ul{
            list-style: none;
        }
        .active{
            color: #FE6F04;
            border-bottom: 2px solid #FE6F04;
        }
        #obbo{
            display: block;
        }

        .ContenTitleBox_ul{
            width: 100%;
            height: 100%;
        }
        .ContenTitleBox_ul,ContenTitleBox_ul>li{
            list-style: none;
            font-size: 14px;
        }
        li{
            cursor: pointer;
            margin-left: 30px;
            height: 25px;
            line-height: 25px;
        }
        #ContentBox{
            width: 800px;
            height: 300px;
            background: #F5F5F5;
            border-bottom: 1px solid #BDBDBD;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        #ContentBox .ContenTitleBox{
            width: 100%;
            height: 35px;
        }
        #ContentBox .ContenTitleBox ul{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        #ContentBox .ContentConternBox{
            width: 100%;
            height: 265px;
        }
        #ContentBox .ContentConternBox .ContentContern_ulOne, .ContentContern_ulTwo, .ContentContern_ulThree, .ContentContern_ulFore{
            width: 100%;
            height: 100%;
        }
        .ContentConternBox>ul li{
            float: left;
            background: #fff;
            margin-left: 15.5px;
            width: 180px;
            height: 100%;
            text-align: center;
        }
        .ContentConternBox span{
            display: block;
            width: 70px;
            height: 25px;
            margin: 0 auto;
            font-size: 14px;
            text-align: center;
            background: #FE6F04;
            line-height: 25px;
        }
        .ContentConternBox img{
            margin-top: 5px;
        }
        .ContentConternBox p{
            font-size: 12px;
            color: #BDBDBD;
        }
        .ContentConternBox>ul{
            display: none;
        }
        .ContentConternBox>ul:nth-child(2){
            display: block;
        }
    </style>
</head>
<body>
    <div id="ContentBox">
        <div class="ContenTitleBox">
            <ul class="ContenTitleBox_ul">
                <li>器灵</li>
                <li>仙剑客栈</li>
                <li>拜见宫主大人</li>
                <li>百思不得姐</li>
            </ul>
        </div>
        <div class="ContentConternBox">
            <ul class="ContentContern_ulOne">
                <li>
                    <span>器灵</span>
                    <img src="./img/器灵.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2016年11月16日在搜狐视频上线</p>
                    <p style="color: red">播放量突破10亿</p>
                </li>
                <li>
                    <span>器灵</span>
                    <img src="./img/器灵.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2016年11月16日在搜狐视频上线</p>
                    <p style="color: red">播放量突破10亿</p>
                </li>
                <li>
                    <span>器灵</span>
                    <img src="./img/器灵.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2016年11月16日在搜狐视频上线</p>
                    <p style="color: red">播放量突破10亿</p>
                </li>
                <li>
                    <span>器灵</span>
                    <img src="./img/器灵.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2016年11月16日在搜狐视频上线</p>
                    <p style="color: red">播放量突破10亿</p>
                </li>
            </ul>
            <ul class="ContentContern_ulTwo">
                <li>
                    <span>仙侠客栈</span>
                    <img src="./img/仙侠客栈.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2015年6月16日在优酷平台播出</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span>仙侠客栈</span>
                    <img src="./img/仙侠客栈.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2015年6月16日在优酷平台播出</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span>仙侠客栈</span>
                    <img src="./img/仙侠客栈.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2015年6月16日在优酷平台播出</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span>仙侠客栈</span>
                    <img src="./img/仙侠客栈.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2015年6月16日在优酷平台播出</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
            </ul>
            <ul class="ContentContern_ulThree">
                <li>
                    <span style="width: 80px">拜见宫主大人</span>
                    <img src="./img/拜见公主大人.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破5亿</p>
                </li>
                <li>
                    <span style="width: 80px">拜见宫主大人</span>
                    <img src="./img/拜见公主大人.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破5亿</p>
                </li>
                <li>
                    <span style="width: 80px">拜见宫主大人</span>
                    <img src="./img/拜见公主大人.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破5亿</p>
                </li>
                <li>
                    <span style="width: 80px">拜见宫主大人</span>
                    <img src="./img/拜见公主大人.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破5亿</p>
                </li>
            </ul>
            <ul class="ContentContern_ulFore">
                <li>
                    <span style="width: 80px">百思不得姐</span>
                    <img src="./img/百思不得姐.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span style="width: 80px">百思不得姐</span>
                    <img src="./img/百思不得姐.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span style="width: 80px">百思不得姐</span>
                    <img src="./img/百思不得姐.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
                <li>
                    <span style="width: 80px">百思不得姐</span>
                    <img src="./img/百思不得姐.jpg" alt="" style="width: 70%;height: 70%;">
                    <p>2017.11.9搜狐视频独家首播</p>
                    <p style="color: red">播放量突破4亿</p>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>

    // 获取元素
        var oUl = document.getElementsByClassName("ContenTitleBox_ul")[0];
        var oli = oUl.getElementsByTagName("li");
        var ContentConternBox = document.getElementsByClassName("ContentConternBox")[0];
        var ContentConternUL = ContentConternBox.getElementsByTagName("ul");

        oli[1].className = "active";
        for(var i=0; i<oli.length;i++){
            // 保存下标
            oli[i].index = i;
            // 每个li元素的鼠标移入效果
            oli[i].onmouseenter = function(){
                // 调用函数，将当前的标志位作为参数传递过去
                l_(this.index);
                // 给当前li元素添加一个类
                if(oli[this.index].index != 1){//判断如果当前li元素的下标不等于1
                    ContentConternUL[1].style.display = "none";
                }else{
                    ContentConternUL[1].style.display = "";
                }
                oli[this.index].className = "active";
                ContentConternUL[this.index].id = "obbo";
                
            }
        }
    // 清空样式方法
        function l_(k){//接收传递过来的标志位
            for(var i = 0;i<oli.length;i++){//循环每个li元素
            //判断i如果不等于k 则清空
              if(i!=k){
                oli[i].className="";
                ContentConternUL[i].id = "";
              }
            }
        }


</script>
</html>